<template>
    <view class="video">
        <view class="consumable-lines">
            <view class="consumable-lines-tips">
                <text>
                    已观看
                    <text class="consumable-lines-tips-b">{{ item.used }}</text>
                    分钟
                </text>

                <text v-if="item.unuse > 0">
                    再观看
                    <text class="consumable-lines-tips-b">{{ item.unuse }}</text>
                    分钟即可获得一次抽奖
                </text>
                <text v-else>获得一次抽奖机会</text>
            </view>

            <view class="consumable-lines-tag" style="width: 90%">
                <text
                    class="line-tag line-tag-blue"
                    v-if="item.progress > 0"
                    :style="{ left: (item.progress > 90 ? 98 : item.progress) + '%' }">
                    {{ item.progress }}%
                </text>
            </view>

            <up-line-progress
                style="width: 90%"
                activeColor="#845cff"
                :showText="false"
                height="16rpx"
                inactiveColor="#e2ecf5"
                :percentage="item.progress" />
            <image
                @click="luckDraw"
                style="right: 21px"
                class="consumable-lines-gift"
                src="http://119.254.154.50:38081/giftApi/mystatic/images/gift.png"></image>
            <span class="choujiang">去抽奖</span>
        </view>
        <view class="video-item" v-for="(item, index) in videos" :key="index">
            <!-- @timeupdate="(e) => updateTime(e, index)" -->
            <video
                class="video-item-video"
                :id="'myVideo' + index"
                :ref="(el) => getRiskSpreadRef(el, index)"
                @play="onPlay(index, item)"
                @pause="videoPause(index)"
                @ended="videoEnded(index)"
                controls
                enable-progress-gesture
                show-progress
                :src="item.url"
                :poster="poster"></video>
            <view class="video-item-title">{{ item.name }}</view>

            <view class="video-item-tip2 video-item-tip" v-if="item.use == 0">未观看</view>
            <view class="video-item-tip3 video-item-tip" v-else-if="item.use == item.millisecond">已观看</view>
            <view class="video-item-tip1 video-item-tip" v-else>
                已观看{{ $filters.millisecondFormat(item.use) }}/{{ item.times }}
            </view>
        </view>

        <view class="sumbit" @click="toAdv">浏览更多业务</view>
    </view>
</template>

<script setup>
import api from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { getCurrentInstance } from "vue";

onShow(() => {
    getVideoTimes(true);
});

const getVideoTimes = async (type) => {
    let data = await api.gift.videoTimesGet();
    item.value.progress = data.progress;
    item.value.used = data.used;
    item.value.unuse = data.unuse;
    if (type) {
        videos.value[0].use = data.video1;
        videos.value[1].use = data.video2;
        videos.value[2].use = data.video3;
        videos.value[3].use = data.video4;
        videos.value[4].use = data.video5;
    }
};

const saveVideoTimes = (param) => {
    api.gift.saveVideoTimePost(param);
    getVideoTimes(false);
};

const item = ref({
    progress: 0,
    used: 0,
    unuse: 10,
});

const videos = ref([
    {
        url: "http://119.254.154.50:38081/giftApi/mystatic/video/WeChat_20240904205518.mp4",
        poster: "http://119.254.154.50:38081/giftApi/mystatic/video/v1.png",
        name: "见证向上的希望",
        use: 0,
        millisecond: 565000,
        times: "09:25",
        timer: null,
    },
    {
        url: "http://119.254.154.50:38081/giftApi/mystatic/video/WeChat_20240904205446.mp4",
        poster: "http://119.254.154.50:38081/giftApi/mystatic/video/v2.png",
        name: "践行绿色金融",
        use: 0,
        millisecond: 180000,
        times: "03:00",
        timer: null,
    },
    {
        url: "http://119.254.154.50:38081/giftApi/mystatic/video/WeChat_20240904205456.mp4",
        poster: "http://119.254.154.50:38081/giftApi/mystatic/video/v3.png",
        name: "生活正向前",
        use: 0,
        millisecond: 180000,
        times: "03:00",
        timer: null,
    },
    {
        url: "http://119.254.154.50:38081/giftApi/mystatic/video/WeChat_20240904205504.mp4",
        poster: "http://119.254.154.50:38081/giftApi/mystatic/video/v4.png",
        name: "积分兑换倒计时",
        use: 0,
        millisecond: 27000,
        times: "00:27",
        timer: null,
    },
    {
        url: "http://119.254.154.50:38081/giftApi/mystatic/video/WeChat_20240904205512.mp4",
        poster: "http://119.254.154.50:38081/giftApi/mystatic/video/v5.png",
        name: "信用卡到期怎么办？",
        use: 0,
        millisecond: 42000,
        times: "00:42",
        timer: null,
    },
]);

const riskSpreadRefList = ref([]);
const getRiskSpreadRef = (el, index) => {
    if (el) {
        riskSpreadRefList.value[index] = el;
    }
};

const video = ref(null);
const instance = getCurrentInstance(); // 获取组件实例
const onPlay = (index) => {
    // 获取所有视频元素
    const query = uni.createSelectorQuery().in(instance);
    query
        .selectAll(".video-item-video")
        .boundingClientRect((rects) => {
            rects.forEach((videoItem, videoIndex) => {
                if (videoIndex !== index) {
                    clearInterval(videos.value[videoIndex].timer);
                    const videoRef = uni.createVideoContext("myVideo" + videoIndex);
                    videoRef.pause();
                }
            });

            // 开始播放时启动定时器
            videos.value[index].timer = setInterval(() => {
                const millisecond = videos.value[index].use + 1000;
                if (millisecond < videos.value[index].millisecond) {
                    videos.value[index].use = millisecond;
                    if (millisecond % 10000 == 0) {
                        const param = {
                            index: index,
                            time: millisecond,
                        };
                        saveVideoTimes(param);
                    }
                } else {
                    if (videos.value[index].use != videos.value[index].millisecond) {
                        const param = {
                            index: index,
                            time: millisecond,
                        };
                        saveVideoTimes(param);
                    }
                    videos.value[index].use = videos.value[index].millisecond;
                }
            }, 1000); // 每1000毫秒更新一次
        })
        .exec();

    // const videll = document.querySelectorAll("video");
    // 遍历所有视频元素，除了当前播放的视频，其余的全部暂停
    // videll.forEach((video, videoIndex) => {
    //     if (videoIndex !== index) {
    //         clearInterval(videos.value[videoIndex].timer);
    //         video.pause();
    //     }
    // });
};

const updateTime = (e, index) => {
    //当前进度
    let currentTime = parseInt(e.detail.currentTime);
    const millisecond = videos.value[index].use + 250;
    if (millisecond < videos.value[index].millisecond) {
        videos.value[index].use = millisecond;
        if (millisecond % 10000 == 0) {
            const param = {
                index: index,
                time: millisecond,
            };
            saveVideoTimes(param);
        }
    } else {
        if (videos.value[index].use != videos.value[index].millisecond) {
            const param = {
                index: index,
                time: millisecond,
            };
            saveVideoTimes(param);
        }
        videos.value[index].use = videos.value[index].millisecond;
    }
};

//结束保存视频
const videoPause = (index) => {
    // 暂停时清除定时器
    clearInterval(videos.value[index].timer);
    const param = {
        index: index,
        time: videos.value[index].use,
    };
    saveVideoTimes(param);
};
//结束保存视频
const videoEnded = (index) => {
    // 暂停时清除定时器
    clearInterval(videos.value[index].timer);
    const param = {
        index: index,
        time: videos.value[index].use,
    };
    saveVideoTimes(param);
};
const toAdv = () => {
    uni.navigateTo({
        url: "/pages/adv/adv",
    });
};
//跳转抽奖
const luckDraw = () => {
    uni.navigateTo({
        url: "/pages/luckDraw/index",
    });
};
</script>

<style lang="scss" scoped>
.video {
    background: #f6f6f6;
    padding-bottom: 60rpx;
    padding-top: 20rpx;
    min-height: 100%;
    box-sizing: border-box;
}

.consumable-lines {
    width: 690rpx;
    position: relative;
    background: linear-gradient(to right, rgb(236, 230, 252), rgb(164, 187, 254));
    padding: 16rpx 20rpx 32rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin: 0rpx auto;

    .consumable-lines-tips {
        font-size: 30rpx;
        padding: 30rpx 0 50rpx;

        .consumable-lines-tips-b {
            color: #9e78ff;
            font-size: 32rpx;
            font-weight: 600;
        }
    }

    .consumable-lines-tag {
        height: 70rpx;

        .line-tag {
            padding: 10rpx 14rpx;
            border-radius: 8rpx;
            font-size: 30rpx;
            font-weight: 900;
            letter-spacing: 0px;
            line-height: 14px;
            color: #9e78ff;
            position: relative;
            margin-bottom: 20rpx;
            display: inline-block;
            left: 0px;
            transform: translateX(0);
        }

        .line-tag-blue {
            background: rgb(236, 235, 255);
            transform: translateX(-50%);
        }

        .line-tag-blue:before {
            width: 0px;
            height: 0px;
            content: "";
            border-top: 12rpx solid rgb(236, 235, 255);
            border-right: 12rpx solid transparent;
            border-left: 12rpx solid transparent;
            border-bottom: 12rpx solid transparent;
            position: absolute;
            top: 100%;
            left: 50%;
            margin-top: -2rpx;
            margin-left: -12rpx;
        }
    }

    .consumable-lines-gift {
        position: absolute;
        right: 0px;
        width: 60rpx;
        height: 60rpx;
        bottom: 20rpx;
    }
}

.video-item {
    width: 690rpx;
    border-radius: 0 0 30rpx 30rpx;
    margin: 30rpx auto;
    background: #fff;
    padding-bottom: 30rpx;

    .video-item-video {
        width: 690rpx;
        height: 350rpx;
        border-radius: 30rpx 30rpx 0 0;
    }

    .video-item-title {
        margin-top: 18rpx;
        margin-left: 20rpx;
        font-weight: 900;
    }

    .video-item-tip {
        font-size: 28rpx;
        margin-top: 16rpx;
        margin-left: 20rpx;
        font-weight: 700;
    }

    .video-item-tip1 {
        color: #9e78ff;
    }

    .video-item-tip2 {
        color: #f6ce02;
    }

    .video-item-tip3 {
        color: #444;
    }
}

.sumbit {
    margin: 80rpx auto 0;
    width: 500rpx;
    padding: 20rpx;
    color: #fff;
    text-align: center;
    border-radius: 200rpx;
    background: linear-gradient(to right, rgba(193, 75, 244, 1), rgba(82, 40, 215, 1));
}

.choujiang {
    position: absolute;
    width: 1px;
    top: 78px;
    right: 21px;
    color: #c32626;
    font-weight: 700;
    font-size: 13px;
}
</style>
